<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/animate.min.css">
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <link rel="stylesheet/less" href="../css/common.less">
  <link rel="stylesheet/less" href="../css/about.less">
  <link rel="stylesheet/less" href="../css/reset.less">
  
</head>

<body>
  <!-- 头部信息 -->
  <div id="head">
    <div class="container">
      <div class="left">
        <div class="item">
          <span class="iconfont">&#xeb40;</span>
          <span>Mon-Friday 9am -5pm</span>
        </div>
        <div class="item">
          <span class="iconfont">&#xe611;</span>
          <span>123-123-123</span>
        </div>
        <div class="item">
          <span class="iconfont">&#xe604;</span>
          <span>email@domain.com</span>
        </div>
      </div>
      <div class="right">
        <div class="icon"><span class="iconfont">&#xe689;</span></div>
        <div class="icon"><span class="iconfont">&#xe87f;</span></div>
        <div class="icon"><span class="iconfont">&#xe883;</span></div>
        <div class="icon"><span class="iconfont">&#xe60b;</span></div>
      </div>
    </div>
  </div>
  <!-- 导航栏 -->
  <div id="header">
    <nav class="navbar navbar-default navbar-white" id="navbar-white">
      <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Karting <span>Arena</span></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../index.html">首页</a></li>
            <li><a href="./about.html">关于我们</a></li>
            <li><a href="./services.html">服务</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">画廊 <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li class="dropdown ">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                    aria-expanded="false">网格布局 <span class="caret"></span></a>
                  <ul class="dropdown-menu dropdown-menu-right er">
                    <li><a href="./gallery1.html">2 列</a></li>
                    <li><a href="#">3 列</a></li>

                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown ">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                aria-expanded="false">博客 <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-left">
                <li><a href="#">右栏</a></li>
                <li><a href="#">一个博客</a></li>
              </ul>
            </li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </div>
  <!-- 轮播图 -->
  <div id="slide" >
    <div class="slide_img ">
      <img src="../image/1.jpg" alt="" srcset="" id="slide-img">
    </div>
    <div class="slide_content">
      <h1 class="wow fadeInUp" data-wow-delay=".5s">关于我们</h1>
      <div class="a">
        <a href="../index.html">首页</a>
        <span>&gt;</span>
        <span>关于</span>
      </div>
    </div>

  </div>
  <div id="col-7-section">
    <div class="container">
      <div class="col">
        <img src="../image/2.jpg" alt="" srcset="">
        <div class="row">
          <div class="title">
            <h2 class="wow fadeInUp" data-wow-delay="1s">质量工具</h2>
            <span class="wow fadeInUp" data-wow-delay=".5s">优质服务!</span>
          </div>
          <p>
            幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。
          </p>
          <div class="row1">
            <div class="conts">
              <span class="iconfont">&#xe621;</span>
              <h3>企业巴士服务</h3>
            </div>
            <div class="conts">
              <span class="iconfont">&#xe621;</span>
              <h3>国内皮卡</h3>
            </div>
            <div class="conts">
              <span class="iconfont">&#xe621;</span>
              <h3>保养良好的车辆</h3>
            </div>
            <div class="conts">
              <span class="iconfont">&#xe621;</span>
              <h3>有竞争力的定价</h3>
            </div>
            <div class="conts">
              <span class="iconfont">&#xe621;</span>
              <h3>无需预订费用</h3>
            </div>
          </div>
          <div class="abq wow fadeInUp" data-wow-delay="1s">
            <a href="javascript:;" >开始&nbsp;></a>
          </div>

        </div>
      </div>
    </div>
  </div>
  <!-- 介绍特点 -->
  <div id="col-4-section">
    <div class="container">
      <div class="titles">
        <h1>为什么选择我们</h1>
      </div>
      <div class="col">
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div><span class="iconfont">&#xe849;</span></div>
          <h2>免费取消</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div><span class="iconfont">&#xebcf;</span></div>
          <h2>不收取预订费用</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
        <div class="row wow fadeInDown" data-wow-delay=".5s">
          <div><span class="iconfont">&#xf0fc;</span></div>
          <h2>可靠的传输</h2>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
        </div>
      </div>

    </div>
  </div>
  <!-- 小标题 -->
  <div id="titles">
    <div class="container">
      <div class="title">
        <h1>我们的奖状</h1>
      </div>
    </div>
  </div>
  <div id="reviews_section">
    <div class="container">
      <div class="col">
        <div class="reviews">
          <div class="row wow fadeInUp" data-wow-delay=".5s">
            <span class="iconfont">&#xe8de;</span>
            <div class="xx">
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
            </div>
            <h1>首席执行官</h1>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          </div>
          <div class="row wow fadeInUp" data-wow-delay=".5s">
            <span class="iconfont">&#xe8de;</span>
            <div class="xx">
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
            </div>
            <h1>首席财务官</h1>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          </div>
          <div class="row wow fadeInUp" data-wow-delay=".5s">
            <span class="iconfont">&#xe8de;</span>
            <div class="xx">
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
            </div>
            <h1>首席财务官</h1>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          </div>
          <div class="row wow fadeInUp" data-wow-delay=".5s">
            <span class="iconfont">&#xe8de;</span>
            <div class="xx">
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
            </div>
            <h1>副总裁</h1>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          </div>
          <div class="row wow fadeInUp" data-wow-delay=".5s">
            <span class="iconfont">&#xe8de;</span>
            <div class="xx">
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
            </div>
            <h1>副总裁</h1>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          </div>
          <div class="row wow fadeInUp" data-wow-delay=".5s">
            <span class="iconfont">&#xe8de;</span>
            <div class="xx">
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
            </div>
            <h1>首席执行官</h1>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          </div>
          <div class="row wow fadeInUp" data-wow-delay=".5s">
            <span class="iconfont">&#xe8de;</span>
            <div class="xx">
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
            </div>
            <h1>首席执行官</h1>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          </div>
          <div class="row wow fadeInUp" data-wow-delay=".5s">
            <span class="iconfont">&#xe8de;</span>
            <div class="xx">
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
              <span class="iconfont">&#xe686;</span>
            </div>
            <h1>首席财务官</h1>
            <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          </div>
        </div>
        <div class="section">
          <div class="cire_active"></div>
          <div class="cire"></div>
          <div class="cire"></div>
          <div class="cire"></div>
        </div>
      </div>
   
    </div>
  </div>
   <!-- 小标题 -->
   <div id="titles">
    <div class="container">
      <div class="title">
        <h1>我们的团队</h1>
      </div>
    </div>
  </div>
  <div id="col-9-section">
      <div class="col">
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="col9-img">
            <img src="../image/r1.jpg" alt="" srcset="">
          </div>
          <h4>查尔斯·勒克莱尔</h4>
          <h6>卡丁车大师-二级</h6>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          <div class="icon">
            <div class="icon1"><span class="iconfont">&#xe689;</span></div>
            <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
            <div class="icon1"> <span class="iconfont">&#xe883;</span></div>
          </div>
        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="col9-img">
            <img src="../image/r2.jpg" alt="" srcset="">
          </div>
          <h4>费尔南多·阿隆索</h4>
          <h6>卡丁车大师-二级</h6>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          <div class="icon">
            <div class="icon1"><span class="iconfont">&#xe689;</span></div>
            <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
            <div class="icon1"> <span class="iconfont">&#xe883;</span></div>
          </div>
        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="col9-img">
            <img src="../image/r3.jpg" alt="" srcset="">
          </div>
          <h4>刘易斯·汉密尔顿</h4>
          <h6>卡丁车大师-二级</h6>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          <div class="icon">
            <div class="icon1"><span class="iconfont">&#xe689;</span></div>
            <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
            <div class="icon1"> <span class="iconfont">&#xe883;</span></div>
          </div>
        </div>
        <div class="row wow fadeInUp" data-wow-delay=".5s">
          <div class="col9-img">
            <img src="../image/r4.jpg" alt="" srcset="">
          </div>
          <h4>Max Verstappen</h4>
          <h6>卡丁车大师-二级</h6>
          <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。</p>
          <div class="icon">
            <div class="icon1"><span class="iconfont">&#xe689;</span></div>
            <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
            <div class="icon1"> <span class="iconfont">&#xe883;</span></div>
          </div>
        </div>
      </div>
    </div>
    <div id="title">
      <div class="wz wow fadeInUp" data-wow-delay=".5s">开始与充分包装的功能与惊人的设计这个主题</div>
      <div class="a wow fadeInUp" data-wow-delay=".5s"><a href="javascript:;">开始&nbsp;></a></div>
    </div>
    <div id="buttom">
      <div class="container">
        <div class="top">
          <div class="buttom">
            <div class="logo">
              Karting <span>Arena</span>
            </div>
            <div class="conte">
              <p>幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征，幸福是幸福的象征。我不认为这是一种暂时的意外，但我认为这是一种巨大的意外。</p>
              <div class="icon">
                <div class="icon1"><span class="iconfont">&#xe689;</span></div>
                <div class="icon1"><span class="iconfont">&#xe87f;</span></div>
                <div class="icon1"><span class="iconfont">&#xe883;</span></div>
                <div class="icon1"><span class="iconfont">&#xe60b;</span></div>
              </div>
            </div>
          </div>
          <div class="buttom">
            <div class="a">有用的服务</div>
            <div class="a1">
              <a href="javascript:;">教练</a>
              <a href="javascript:;">车辆</a>
              <a href="javascript:;">预订</a>
              <a href="javascript:;">道路</a>
              <a href="javascript:;">折扣</a>
            </div>
          </div>
          <div class="buttom">
            <div class="b">需要帮忙吗?</div>
            <div class="b1">
              <div class="item">
                <span class="iconfont">&#xe604;</span>
                <span>email@domain.com</span>
              </div>
              <div class="item">
                <span class="iconfont">&#xe611;</span>
                <span>123-123-123</span>
              </div>
              <div class="item">
                <span class="iconfont">&#xefec;</span>
                <span>knowledgeaware.tk</span>
              </div>
  
            </div>
          </div>
        </div>
  
        <div class="buttom1">
          <div class="left">
            <p>Copyright © 2024.Company name All rights reserved.</p>
          </div>
          <div class="right">
            <a href="javascript:;">教练</a>
            <a href="javascript:;">车辆</a>
            <a href="javascript:;">预订</a>
            <a href="javascript:;">道路</a>
            <a href="javascript:;">折扣</a>
          </div>
        </div>
      </div>
    </div>
    <div id="back">
      <a href="#head" >
        <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
      </a>
  
    </div>
    <div id="jiazhai">
      <img src="../image/ajax-loader.gif" alt="" srcset="">
    </div>
</body>

</html>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/less.min.js"></script>
<script src="../js/wow.min.repeat.js"></script>
<script src="../js/common.js"></script>
<script>

var reviews=document.getElementsByClassName('reviews')[0]
var section=document.getElementsByClassName('section')[0]
var cireList=section.children
var rowList=reviews.children
reviews.style.width=rowList.length/2*100+11+'%'
var T;
var index=0
for(var i=0;i<cireList.length;i++){
  cireList[i].onclick=active
  cireList[i].setAttribute('data-index',i)
}

function active(){
  var it=index
index=this.dataset.index
if(index==it){
  return
}
for(var i=0;i<cireList.length;i++){
  cireList[i].className='cire'
}
cireList[index].className='cire_active'
var width=rowList[0].clientWidth
var tt=it*25
  T= setInterval( ()=>{
    if(tt==index*25){
    clearInterval(T)
  }
    reviews.style.transform=`translateX(-${tt}%)`;
    if(it<index)
    {
      tt++
    }
    else
    {
      tt--
    } 
   
  },10)
}



</script>